<!--
* description: 改动
-->
<template>
  <section class="editCarBrand">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="标签打印"
      :append-to-body="true"
      :visible.sync="showDialog"
      width="600px"
      @close="close"
      :custom-class="formField.printNum > 1 ? 'printDialog' : ''"
    >
      <dialogHeader
        slot="title"
        title="标签打印"
        :styleType="$store.state.app.dialogType"
      ></dialogHeader>
      <div class="filter-container filter-params" style="position: relative">
        <div class="printMain" ref="print">
          <el-button
            size="medium"
            type="primary"
            class="printBtn"
            @click="print"
            >打印</el-button
          >
          <div
            style="page-break-after: always"
            v-for="printNum in formField.printNum - 0"
            :key="printNum"
            class="printInfoP"
          >
            <div class="printInfo">
              <div class="printInfoDiv">
                <div class="printInfoRow">
                  备件编码：{{ formField.PART_NO }}
                </div>
                <div class="printInfoRow">
                  备件名称：{{ formField.PART_NAME }}
                </div>
                <div class="printInfoRow">
                  包装数量：{{ formField.SNP_OUT }} 
                </div>
                <div class="printInfoRow">
                  供应商：{{ formField.SUPPLIER_CODE }}
                </div>
              </div>
              <div class="printInfoDiv">
                <div class="qrcode" :id="'qrcode' + printNum"></div>
              </div>
            </div>
            <div class="footer">第{{ printNum }}页</div>
          </div>
        </div>
      </div>
      <!-- <div slot="footer" class="dialog-footer"></div> -->
    </el-dialog>
  </section>
</template>
<script>
import request from "@/utils/request";
import QRCode from "qrcodejs2";
export default {
  components: {
    dialogHeader: () => import("@/components/dialogHeader"), //弹窗标题
  },
  props: {
    isShow: { type: Boolean, default: false },
    formField: { type: Object, default: {} },
  },
  data() {
    return {
      // 是否显示
      showDialog: this.isShow,
    };
  },
  created() {
    // console.log(this.formField);
    if (this.showDialog) {
      this.creatQrCode();
    }
  },
  mounted() {
    // console.log(this.formField);
  },
  methods: {
    creatQrCode() {
      setTimeout(() => {
        for (let i = 0; i < this.formField.printNum; i++) {
          new QRCode("qrcode" + (i + 1), {
            text: this.formField.PART_NO, // 需要转换为二维码的内容
            width: 64,
            height: 64,

            colorDark: "#000000",
            colorLight: "#ffffff",
            correctLevel: QRCode.CorrectLevel.H,
          });
        }
      }, 50); 
    },
    close() {
      this.showDialog = false;
      this.$emit("detailClose");
    },
    print() {
      let styles = `@page{size: auto; margin: 0mm;} 
      .footer {display: none;}.printBtn {display: none;} 
      .printInfoP {padding-top: 90px;font-size: 1px;} 
      .printInfo {padding-left: 20px !important;padding-top: 10px;font-family:华康金刚黑; }
      .qrcode {padding-left: 25px; }
      .printInfoDiv {display: inline-block; }
      .printInfoDiv:first-child {width: 170px !important; }
      .printInfoRow { font-size: 12px font-family:华康金刚黑; }`;
      this.$printJs.printByEle(this.$refs.print, styles);
      this.$printJs.getStyle(this.$refs.print);
      this.showDialog = false;
      this.$emit("detailClose"); 
    }, 
  },
};
</script>
<style lang="scss" scoped>
/deep/ .printDialog {
  height: 85%;
}
/deep/ .el-dialog__body {
  height: calc(100% - 41px);
}
.qrcode {
  display: inline-block;
  padding-top: 5px;
  img {
    width: 132px;
    height: 132px;
    background-color: #fff; //设置白色背景色
    padding: 6px; // 利用padding的特性，挤出白边
    box-sizing: border-box;
  }
}
.printMain {
  width: 100%;
  .printInfo {
    padding-left: 60px;
    text-align: left;
    &:after {
      display: block;
      content: "";
      clear: both;
    }
    .printInfoDiv {
      width: 50%;
      float: left;
    
    }
  }

  .footer {
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 1px dashed #000;
    margin-top: 30px;
  }
}
.printBtn {
  position: fixed;
  z-index: 99999999;
  line-height: 24px;
  margin-left: -100px;
}
// @media print {
//   .footer {
//     display: none;
//   }
//   .printBtn {
//     display: none;
//   }
//   .printInfoP {
//     padding-top: 200px; //控制上下
//     font-size: 20px; // 控制字体大小
//     .printInfo {
//       padding-left: 0px; //控制左右
//     }
//   }
// }
</style>